<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<block slot="content">新增</block>
			</cu-custom>

			<view class="formbox">
				<view class="border">
					<uni-forms ref="form" :modelValue="formData" :rules="rules">
						<uni-forms-item label="学校名称" name="schoolName">
							<view class="biaoxing">*</view>
							<input class="input" v-model="formData.schoolName" type=text placeholder="请输入学校名称" />
						</uni-forms-item>
					<!-- 	<uni-forms-item label="创建人" name="createBy">
							<input class="input" v-model="formData.createBy" type=text placeholder="请输入创建人" />
						</uni-forms-item> -->
						<uni-forms-item label="所属镇街" name="town">
							<view class="biaoxing">*</view>
								<uni-data-picker :border="false" v-model="formData.town" :localdata="queryTreeList"
									:map="{text:'departName',value:'id'}" popup-title="请选择所属镇街"></uni-data-picker>
						</uni-forms-item>
						<uni-forms-item label="负责人" name="principalName">
							<view class="biaoxing">*</view>
							<input class="input" v-model="formData.principalName" type=text placeholder="请输入负责人" />
						</uni-forms-item>
						<uni-forms-item label="联系电话" name="principalPhone">
							<view class="biaoxing">*</view>
							<input class="input" v-model="formData.principalPhone" type="number" placeholder="请输入联系电话" />
						</uni-forms-item>
						
						<uni-forms-item label="详细地址" name="address">
							<view class="biaoxing">*</view>
							<input class="input" v-model="formData.address" type=text placeholder="请输入详细地址" />
							<view  @click="openmap" class="icon-ditu-dibiao"></view>
						</uni-forms-item>
						<!-- <uni-forms-item label="经纬度" name="latitude">
							<input class="input" @click="openmap" v-model="formData.lat" type=text placeholder="纬度" />
							<input class="input" @click="openmap" v-model="formData.lon" type=text placeholder="经度" />
						</uni-forms-item> -->
						<!-- <uni-forms-item label="学校编号" name="schoolCode">
							<input class="input" v-model="formData.schoolCode" type=text placeholder="请输入学校编号" />
						</uni-forms-item> -->
						
						<uni-forms-item label="学校类型" name="schoolType">
							<view class="biaoxing">*</view>
							<mySelect v-model="formData.schoolType" placeholder="请选择学校类型" dictCode="school_type" space>
							</mySelect>

						</uni-forms-item>
						<uni-forms-item label="举办者" name="organizer">
							<mySelect v-model="formData.organizer" placeholder="请选择举办者" dictCode="school_organizer" space>
							</mySelect>
							
						</uni-forms-item>
						<uni-forms-item label="学校面积" name="acreage">
							<input v-model="formData.acreage" type="text" placeholder="请输入学校面积" />
							<view class="posit">m²</view>
						</uni-forms-item>
						<uni-forms-item label="建筑数量" name="architNum">
							<input v-model="formData.architNum" type="text" placeholder="请输入建筑数量" />
						</uni-forms-item>
					</uni-forms>
					<view class="padding flex flex-direction">
						<button class="cu-btn bg-blue lg" @click="submit">确认新增</button>
					</view>
				</view>


			</view>
			<!-- <view @click="get_location">地图</view> -->



		</scroll-view>
	</view>

</template>

<script>
	import amap from "@/common/js-sdk/js-amap/amap-wx.js";
	import appSelect from '@/components/my-componets/appSelect.vue'
	import server from '@/api/server.js'
	const plan_type = [{
		text: '日常记录',
		value: '日常记录1'
	}, {
		text: '本周工作',
		value: '本周工作2'
	}, {
		text: '下周计划',
		value: '下周计划3'
	}];

	export default {
		components: {
			appSelect
		},
		data() {
			return {
				queryTreeList: [],
				plan_type,
				modalName: null,
				// 表单数据
				formData: {
					createBy: '',
					principalName: '',
					principalPhone: '',
					schoolName: '',
					schoolCode: '',
					schoolType: '',
					town: '',
					lat: '',
					lon: '',
					address: '',
				},
				rules: {
					// 对name字段进行必填验证
					name: {
						rules: [{
								required: true,
								errorMessage: '请选择社区',
							},
							{
								required: true,
								errorMessage: '请输入姓名',
							},
							{
								minLength: 3,
								maxLength: 5,
								errorMessage: '姓名长度在 {minLength} 到 {maxLength} 个字符',
							}
						]
					},
					schoolName: {
						rules: [{
							required: true,
							errorMessage: '请输入学校名称',
						}, ]

					},
					town: {
						rules: [{
							required: true,
							errorMessage: '请输入所属镇街',
						}, ]

					},
					principalName: {
						rules: [{
							required: true,
							errorMessage: '请输入负责人',
						}, ]
					},
					principalPhone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话',
						}, 
						{
							minLength: 11,
							maxLength: 11,
							errorMessage: '联系电话长度在{maxLength} 个字符',
						}]
					},
					latitude: {
						rules: [{
							required: true,
							errorMessage: '请输入纬度/经度',
						}, ]
					},
					address: {
						rules: [{
							required: true,
							errorMessage: '请输入详细地址',
						}, ]
					},
					schoolType: {
						rules: [{
							required: true,
							errorMessage: '请输入学校类型',
						}, ]
					},
				},

			}
		},
		onShow() {
			this.formData.lat = this.$store.state.lat
			this.formData.lon = this.$store.state.lon
			this.formData.address = this.$store.state.address
		},
		onLoad(options) {
			//options可以接到index 传过来的值
			this.formData.placeType = options.placeType
		},
		mounted() {
			this.getdet()
		},
		methods: {
			//打开地图
			openmap() {
				uni.navigateTo({
					url: '/pages/map/map'
				})
			},
			
			// 触发提交表单
			submit() {
				this.$refs.form.validate().then(res => {
					console.log('表单数据信息：', res);
					this.$http.post("/school/add", this.formData).then(res => {
						console.log(res)
						if (res.data.success) {
							this.$tip.success('新增成功!')
							uni.navigateBack({
								delta: 1
							});
						} else {
							this.$tip.success(res.data.message)
						}

					})
				}).catch(err => {
					console.log('表单错误信息：', err);
				})
			},
			getdet() {
				server.queryTreeList({category:4}).then(res => {
					this.$nextTick(function() {
						console.log(res)
						this.queryTreeList = res.data.result
					});
			
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/.cu-form-group uni-picker::after {
		content: unset;
	}


	.formbox {
		background: white;
		padding: 10px;

		.border {
			padding: 10px;
			border: 1px solid #dddd;
			border-radius: 20px;
			box-shadow: 1px 1px 13px 0px #ccc;
			margin-bottom: 10px;
		}

		/deep/.is-direction-left {
			border-bottom: 1px solid #ddd;
		}

		/deep/.uni-forms-item__inner {
			padding: 6px 0;

		}

		/deep/.is-input-error-border {
			border: unset !important;
		}

		/deep/.uni-forms-item__label .label-text {
			font-size: 15px;
			color: grey;
		}

		.uni-input-placeholder {
			color: #8799a3;
		}
	}
	.biaoxing {
		position: absolute;
		left: -9px;
		top: 17px;
		font-size: 26px;
		color: red;
	}
	.icon-ditu-dibiao{
		    font-size: 28px;
		    color: #6363ea;
		    float: right;
		    position: absolute;
		    right: 7px;
	}
</style>
